<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>登录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <!--    <script src="js/mui.min.js" type="text/javascript"></script>-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
        .captchaImg {
            /*position: relative;*/
            margin: auto auto;
            left: 0.1em;
            top: 0.2em;
            right: 0.1em;
            bottom: 0.2em;
            width: auto;
            /*height:auto;*/
            max-width: 90%;
            max-height: 90%;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<div class="login clearfloat box-s">
    <h3>会员登录</h3>
    <div class="list clearfloat">
        <ul>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-yonghuming"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="username" value="" placeholder="用户姓名"/>
                </div>
            </li>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-mima"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input type="text" name="" id="password" value="" placeholder="登录密码"/>
                </div>
            </li>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-yanzhengma"></i>
                </p>
                <div class="nr nrtwo clearfloat fl">
                    <span class="opa3 cap_touch"></span>
                    <input type="text" name="" id="captcha" value="" placeholder="验证码"/>
                    <samp class="db fr" style="background-color: #ffffff;"><img class="captchaImg"
                                                                                            src="/captcha"/></samp>
                </div>
            </li>
        </ul>
    </div>
    <div class="mima clearfloat">
        <ul>
            <li class="fl">
                <div class="xuan clearfloat fl">
                    <div class="radiofour">
                        <label>
                            <input type="checkbox" id="auto" name="" value=""/>
                            <div class="option"></div>
                            <span class="opt-text">记住密码</span>
                        </label>
                    </div>
                </div>
            </li>
            <li class="fr">
                <a href="verification.html">找回密码？</a>
            </li>
        </ul>
    </div>
    <div class="login-btn">
        <!--		href="xuzhi.html"-->
        <a id="loginBtn" href="xuzhi.html">
            登录
        </a>
        <a href="register.html" class="btn">
            <span class="opa5"></span>
            <samp>注册</samp>
        </a>
    </div>
</div>
</body>
<script type="text/javascript">
    var loginUrl = "../users/login"

    $(function () { // 页面就绪事件

        if(localStorage.getItem("auto") ==1 ){
            $("#auto").attr("checked",true);
        }else{
            $("#auto").attr("checked",false);
        }

        $("#username").bind("input", function () {
            checkLength("username", 6, 12);
        });

        // 为密码输入框添加失去焦点事件
        $("#password").blur(function () {
            checkEmpty("password", "密码不能为空");
        });

        $("#auto").change(function () {
            if($("#auto")[0].checked){
                localStorage.setItem("auto",1)
            }else{
                localStorage.setItem("auto",0)
            }
        })

        // 为用户名输入框添加失去焦点事件
        $("#username").blur(function () {
            if (!checkEmpty("username", "用户名不能为空")) {
                return;
            }
            if (!checkLength("username", 6, 12)) {
                return;
            }
            if(localStorage.getItem("username") === $("#username").val() && $("#auto")[0].checked === true){
                $("#password")[0].value = localStorage.getItem("password")
            }
            // 勾选自动登录
            // 获取浏览器保存的autoLogin的Cookie
            // var cookie = $.cookie("autoLogin");
            // if (cookie != null) {
            //     // 获取该Cookie的value中保存的用户名
            //     var cUsername = cookie.split("_#_")[0];
            //     // 判断与当前用户名是否一致
            //     if (cUsername == $("#username").val()) {
            //         // 是：将自动登录设为勾选状态
            //         $("#auto")[0].checked = true;
            //     } else {
            //         $("#auto")[0].checked = false;
            //     }
            // }
        });

        $(".cap_touch").click(function () {
            $(".captchaImg").attr("src", "/captcha?timestamp=" + new Date().getTime())
        })

        // 为提交按钮添加点击事件
        $("#loginBtn").click(function (event) {
            event.preventDefault();
            // 获取表单数据
            var username = $("#username").val();
            var pwd = $("#password").val();
            var captcha = $("#captcha").val();

            // 判断页面中的input是否都是验证成功的状态
            var divArr = $("div.has-success");
            // if (divArr.length != 2) { // 存在异常项
            //     return;
            // }

            // 提交表单
            var params = {
                username: username,
                password: pwd,
                captcha: captcha.toLowerCase()
            }
            // 查看是否勾选自动登录
            // if ($("#auto")[0].checked) {
            //     // 请求参数中添加 checked=true
            //     params.checked = true;
            // }

            // 发送AJAX请求
            $.post(loginUrl, params, function (result) {
                // 处理响应数据
                if (result.state == 1000) { // 正常响应
                    // alert("登录成功，点击跳转首页");
                    // 将头像路径添加到cookie中,{"expires":7 单位是天}
                    // $.cookie("avatar", result.data.avatar, {"expires": 7});
                    // 跳转登录页面
                    // window.location.href = "center.html";

                    //保存密码
                    if($("#auto")[0].checked === true){
                        localStorage.setItem("username",$("#username").val())
                        localStorage.setItem("password",$("#password").val())
                    }


                    history.replaceState(null, null, 'center.html')
                    window.location.reload()
                } else { // 异常响应
                    alert(result.msg);
                    $(".captchaImg").attr("src", "/captcha?timestamp=" + new Date().getTime())
                }
            });
        });
    });

    function checkLength(name, minLength, maxLength) {
        if ($("#" + name).val().length < minLength) { // 小于长度
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("长度不能小于" + minLength);
            return false;
        } else if ($("#" + name).val().length > maxLength) {
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("长度不能大于" + maxLength);
            return false;
        } else { // 长度合适
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("");
            return true;
        }
    }

    function checkEmpty(name, msg) {
        if ($("#" + name).val() == "") { // 为空
            $("#" + name).parents(".form-group").addClass("has-error").removeClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text(msg);
            return false;
        } else { // 不为空
            $("#" + name).parents(".form-group").removeClass("has-error").addClass("has-success");
            // 找到input相邻的span，在其中添加错误提示信息
            $("#" + name).next("span").text("");
            return true;
        }
    }
</script>
</html>
